<!-- 账号密码登录 -->
<template>
  <wd-form :model="loginData.loginForm" ref="gennerateForm">
    <wd-input
      v-model="loginData.loginForm.username"
      prop="username"
      :rules="[{ required: true, message: '请填写用户名' }]"
      placeholder="请输入用户名"
      prefixIcon="user"
    />

    <wd-input
      v-model="loginData.loginForm.password"
      prop="password"
      :rules="[{ required: true, message: '请填写密码' }]"
      placeholder="请输入密码"
      show-password
      prefixIcon="lock-on"
    />

    <view class="flex items-center justify-between mt-4">
      <wd-checkbox
        v-model="loginData.loginForm.rememberMe"
        prop="rememberMe"
        shape="square"
      >
        记住
      </wd-checkbox>
      <navigator url="forget" class="text-[var(--wot-color-primary)]">
        忘记密码
      </navigator>
    </view>

    <wd-button
      :block="true"
      :round="false"
      custom-class="mt-8"
      @click="handleLogin('userinfo')"
    >
      <text>登录</text>
    </wd-button>

    <wd-button
      :block="true"
      :round="false"
      :plain="true"
      type="info"
      class="mt-4"
      @click="handleLogin('phoneIndex')"
    >
      <text>本机号登录</text>
    </wd-button>

    <!-- 提示组件 -->
    <wd-toast />
  </wd-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useToast } from 'wot-design-uni'
import { login, getTenantIdByName } from '@/service/login/LoginAPI'
import { useUserStore, useDictStore } from '@/store'
import * as authUtil from '@/utils/auth'

const props = defineProps({
  agree: {
    type: Boolean,
    required: true,
    default: false
  }
})

// 提示组件 TODO @ Qiksy 讨论：// 提示组件 这种，我们要不放在 useToast()，作为尾注释，简洁一点。
const toast = useToast()

const focusInput = ref('')
const handleInputFocus = (type: string) => {
  focusInput.value = type
}

const loginData = reactive({
  isShowPassword: false,
  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
  loginForm: {
    tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
    username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
    password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
    captchaVerification: '',
    rememberMe: true // 默认记录我。如果不需要，可手动修改
  }
})

// 获取租户 ID // TODO @ Qiksy 讨论：这个方法注释，要不用 /** 获取租户 ID */ 高亮的更明显哈。
const getTenantId = async () => {
  if (loginData.tenantEnable === 'true') {
    console.log(loginData.loginForm.tenantName)
    const res = (await getTenantIdByName(
      loginData.loginForm.tenantName
    )) as string
    authUtil.setTenantId(res)
  }
}

const handleLogin = async (type: string) => {
  if (!props.agree) {
    toast.warning('请阅读并同意《用户协议》和《隐私政策》')
    return
  }
  if (type === 'userinfo') {
    focusInput.value = ''

    // 1. 先根据租户名，获取 tenantId
    await getTenantId()

    // todo 校验form数据
    const res = await login(loginData.loginForm)
    if (!res) {
      return
    }

    authUtil.setToken(res)

    // 获取用户信息，保存到 store
    const userStore = useUserStore()
    await userStore.setUserInfoAction()
    // todo  后续审批在黑名单拦截器内可删除下列两行代码  黑名单拦截器未配置情况下测试时 获取字典信息，保存到 store
    const dictStore = useDictStore()
    await dictStore.setDictMap()
    // 暂时先跳到首页
    uni.switchTab({
      url: '/pages/work/index'
    })
    console.log('登录成功')

    // todo 判断重定向

    // todo 处理页面loading展示
  } else {
    uni.navigateTo({ url: '/pages/login/phone-index' })
  }
}
</script>
